<template>
    <view>
        <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
            <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
        </view>


        <!-- 渲染收货信息的盒子 -->
        <view class="address-info-box" v-else   @click="chooseAddress">
            <view class="row1">
                <view class="row1-left">
                    <view class="username">收货人：<text>{{address.userName}}</text></view>
                </view>
                <view class="row1-right">
                    <view class="phone">电话：<text>{{address.telNumber}}</text></view>
                    <uni-icons type="arrowright" size="16"></uni-icons>
                </view>
            </view>
            <view class="row2">
                <view class="row2-left">收货地址：</view>
                <view class="row2-right">{{addstr}} </view>
            </view>
        </view>
        <!-- 底部的边框线 -->
        <image src="/static/cart_border@2x.png" class="address-border"></image>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapGetters
    } from 'vuex'

    export default {
        name: "my-address",
        data() {
            return {

            };
        },
        methods: {
            ...mapMutations('m_user', ['updateAddress']),
            async chooseAddress() {
                try {
                    // 保存当前地址作为备份
                    const oldAddress = JSON.parse(JSON.stringify(this.address));
                    
                    // 调用微信接口选择地址
                    const res = await uni.chooseAddress();
                    
                    // 处理选择结果
                    if (res && res.errMsg && res.errMsg.includes('ok')) {
                        // 只有用户成功选择地址时才更新
                        this.updateAddress(res);
                        // console.log('选择地址成功:', res);
                    } else {
                        // 用户取消选择或其他情况，保持原有地址不变
                        console.log('用户取消选择地址或操作未完成');
                    }
                } catch (err) {
                    // console.log('选择地址失败:', err);
                    // 发生错误时不修改地址状态
                    // 处理授权失败的情况
                    if (err && err.errMsg && err.errMsg.includes('auth deny')) return uni.$showMsg('需要您的地址授权才能继续')
                }
            },
           async reAuth(){
          const [err2,confirmResult ]  = await uni.showModal({
                    title: '提示',
                    content: '需要您的地址授权才能继续',
                    showCancel: false
                })
                if(err2) return
                if(confirmResult.cancel) return uni.$showMsg('您取消了授权')
                if(confirmResult.confirm) return uni.openSetting({
                    success:(settingResult)=>{
                        if(!settingResult.authSetting['scope.address']){
                            uni.$showMsg('授权失败');
                        } else if(settingResult.authSetting['scope.address']){
                            uni.$showMsg('授权成功，您可以继续选择地址');
                        }
                    }
                })
            }
        },
        computed: {
            ...mapState('m_user', ['address']),
            ...mapGetters('m_user', ['addstr'])
        }
    }
</script>

<style lang="scss">
    // 底部边框线的样式
    .address-border {
        display: block;
        width: 100%;
        height: 5px;
    }

    // 选择收货地址的盒子
    .address-choose-box {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    // 渲染收货信息的盒子
    .address-info-box {
        font-size: 12px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 5px;

        // 第一行
        .row1 {
            display: flex;
            justify-content: space-between;

            .row1-right {
                display: flex;
                align-items: center;

                .phone {
                    margin-right: 5px;
                }
            }
        }

        // 第二行
        .row2 {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .row2-left {
                white-space: nowrap;
            }
        }
    }
</style>